/**
 * Created by liguangsong on 16/8/1.
 */
import React, { Component, PropTypes } from 'react'
import NavigationBar from './navigationBar.js'
import { selectTab, searchChange } from '../action/index.js'
import { connect } from 'react-redux';
import SearchView from '../component/players/searchView.js'
import PlayerInfoView from '../component/players/playerInfoView.js'
import Player from '../component/players/index.js'
import Game from '../component/games/index.js'
import Team from '../component/teams/index.js'


class App extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        const { dispatch, select, xPoint, width, filter } = this.props;

        return (
            <div>
                { this.getNavBackground() }
                <NavigationBar xPoint={xPoint} width={width}  onClickBtn={text => dispatch(selectTab(text))} />
            </div>
        )
    }


    getNavBackground() {
        switch (this.props.select) {
            case "Games":
                return (
                    <Game />
                );
            case "Players":
                return (
                    <Player />
                );
            default :
                return (
                    <div>
                        <Team />
                    </div>
                )
        }

    }

}

App.PropTypes = {
    xPoint: PropTypes.string.isRequired,
    width: PropTypes.string.isRequired,
    filter: PropTypes.arrayOf(PropTypes.shape({
        name: PropTypes.array.isRequired,
        team: PropTypes.array.isRequired,
        id: PropTypes.array.isRequired
    }))
};

function select(state) {
    return {
        select: state.selectNav.select,
        xPoint: state.selectNav.xPoint,
        width: state.selectNav.width,
        filter: state.searchChange.filter
    }
}

export default connect( select)(App);
